import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const Navbar: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const router = useRouter();
  
  // 检查是否为职位详情页
  const isJobDetailPage = router.pathname.includes('/careers/positions/');

  // 滚动监听效果
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
      scrolled || isJobDetailPage ? 'bg-white shadow-lg py-2' : 'bg-transparent py-4'
    }`}>
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center">
          {/* Logo */}
          <div className="flex items-center">
            <Link href="/">
              <span className={`text-2xl font-bold transition-colors duration-300 ${
                scrolled || isJobDetailPage ? 'text-blue-600' : 'text-white'
              } cursor-pointer`}>
                凡科<span className="text-blue-500">星悦</span>
              </span>
            </Link>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-1">
            <Link href="/about">
              <span className={`px-4 py-2 rounded-md font-medium transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:text-blue-600 hover:bg-blue-50' 
                  : 'text-white hover:text-blue-200 hover:bg-white/10'
              } cursor-pointer`}>
                关于我们
              </span>
            </Link>
            <Link href="/products">
              <span className={`px-4 py-2 rounded-md font-medium transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:text-blue-600 hover:bg-blue-50' 
                  : 'text-white hover:text-blue-200 hover:bg-white/10'
              } cursor-pointer`}>
                产品服务
              </span>
            </Link>
            <Link href="/careers">
              <span className={`px-4 py-2 rounded-md font-medium transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:text-blue-600 hover:bg-blue-50' 
                  : 'text-white hover:text-blue-200 hover:bg-white/10'
              } cursor-pointer`}>
                招聘职位
              </span>
            </Link>
            <Link href="/news">
              <span className={`px-4 py-2 rounded-md font-medium transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:text-blue-600 hover:bg-blue-50' 
                  : 'text-white hover:text-blue-200 hover:bg-white/10'
              } cursor-pointer`}>
                新闻动态
              </span>
            </Link>
            <Link href="/contact">
              <span className={`px-4 py-2 rounded-md font-medium transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:text-blue-600 hover:bg-blue-50' 
                  : 'text-white hover:text-blue-200 hover:bg-white/10'
              } cursor-pointer`}>
                联系我们
              </span>
            </Link>

            {/* 联系按钮 - 突出显示 */}
            <Link href="/contact">
              <span className={`ml-4 px-5 py-2 rounded-full font-medium transition-all duration-300 ${
                scrolled || isJobDetailPage
                  ? 'bg-blue-600 text-white hover:bg-blue-700' 
                  : 'bg-white text-blue-600 hover:bg-blue-50'
              } cursor-pointer shadow-md hover:shadow-lg transform hover:-translate-y-0.5`}>
                立即咨询
              </span>
            </Link>
          </div>

          {/* Language Selector */}
          <div className="hidden md:flex items-center ml-6">
            <select className={`bg-transparent py-1 px-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ${
              scrolled || isJobDetailPage
                ? 'text-gray-700 border-gray-300' 
                : 'text-white border-white/30'
            }`}>
              <option value="zh" className="text-gray-700">中文</option>
              <option value="en" className="text-gray-700">English</option>
            </select>
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className={`p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ${
                scrolled || isJobDetailPage
                  ? 'text-gray-700 hover:bg-gray-100' 
                  : 'text-white hover:bg-white/10'
              }`}
            >
              <svg
                className="h-6 w-6"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                {isOpen ? (
                  <path d="M6 18L18 6M6 6l12 12" />
                ) : (
                  <path d="M4 6h16M4 12h16M4 18h16" />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isOpen && (
          <div className={`md:hidden mt-4 pb-6 rounded-lg transition-all duration-300 ${
            scrolled || isJobDetailPage ? 'bg-white' : 'bg-white/90 backdrop-blur-md'
          }`}>
            <div className="flex flex-col space-y-2 pt-2 px-4">
              <Link href="/about">
                <span className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md font-medium cursor-pointer">
                  关于我们
                </span>
              </Link>
              <Link href="/products">
                <span className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md font-medium cursor-pointer">
                  产品服务
                </span>
              </Link>
              <Link href="/careers">
                <span className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md font-medium cursor-pointer">
                  招聘职位
                </span>
              </Link>
              <Link href="/news">
                <span className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md font-medium cursor-pointer">
                  新闻动态
                </span>
              </Link>
              <Link href="/contact">
                <span className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md font-medium cursor-pointer">
                  联系我们
                </span>
              </Link>
              <div className="pt-2 border-t border-gray-200 mt-2">
                <Link href="/contact">
                  <span className="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 cursor-pointer">
                    立即咨询
                  </span>
                </Link>
              </div>
              <div className="pt-2">
                <select className="w-full bg-transparent text-gray-700 py-2 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option value="zh">中文</option>
                  <option value="en">English</option>
                </select>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navbar; 